<template>
  <div class="myDiv">
    <!-- 医生信息 -->
    <div class="doctor-header">
      <div class="doctor-info">
        <img class="headeimg" src="../assets/beijing1.png" alt="error" />
        <div class="userinfo">
          <p>欢迎您，{{this.username}}-医生</p>
          <span>登录时间: {{ this.now}}</span>
        </div>
        <img v-if="logo" :src="`http://jk125.com/neoinfo/${logoUrl}`" class="user-logo" alt />
        <img v-else :src="require('../assets/logo.png')" class="user-logo" />
      </div>
      <!-- 订单信息 -->
      <div class="orders">
        <div @click="topage(1)">
          <p>订单数量</p>
          <p>{{datainfo.orderlist}}</p>
        </div>
        <div @click="topage(2)">
          <p>用户数量</p>
          <p>{{datainfo.infolist}}</p>
        </div>
        <div @click="topage(3)">
          <p>体检信息</p>
          <p>{{datainfo.anlist}}</p>
        </div>
        <div @click="topage(4)">
          <p>体检种类</p>
          <p>{{datainfo.dalist['0'].value}}</p>
        </div>
      </div>
    </div>
    <!-- 更多 -->
    <div class="more">
      <div class="content" v-for="(obj,index) in datas" :key="index">
        <h2>{{obj.name}}</h2>
        <div class="more-info">
          <div v-for="(v,i) in obj.childMenus" :key="i" @click="rouToggle(v.url)">
            <div class="cir-bgc">
              <img :src="require(`../assets/img/${i}.png`)" alt />
            </div>
            <div>
              <p>{{v.name}}</p>
              <span>{{v.url.split("/")[1].replace("tiantan","maitan")}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-button @click="signout" class="Sign-out-btn" round type="info">退出登录</van-button>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {
      test: "12",
      datas: [], //所有数据源
      username: "", //用户
      now: "", //当前日期
      datainfo: { dalist: [""] }, //头部数据
      logo: false, //是否有logo
      logoUrl: "" //有logo的url
    };
  },
  watch: {},
  computed: {},
  methods: {
    ...mapMutations(["clear"]),
    // 路由切换
    rouToggle(router) {
      this.$router.push("/" + router);
    },
    // 退出登录
    signout() {
      localStorage.clear();
      this.clear();
      this.$router.push("/login");
      location.reload();
    },
    topage(item) {
      switch (item) {
        case 1:
          this.$router.push({ path: "/device/order" });
          break;
        case 2:
          this.$router.push({ path: "/tiantan/user" });
          break;
        case 3:
          this.$router.push({ path: "/medicinal/analysis" });
          break;
        case 4:
          this.$router.push({ path: "/tiancate/cate" });
          break;
      }
    }
  },
  created() {
    // 创建日期
    let now = new Date();
    this.now =
      now.getFullYear() +
      "-" +
      (+now.getMonth() + 1) +
      "-" +
      now.getDate() +
      " " +
      now.getHours() +
      ":" +
      now.getMinutes();
    // 获取本地存储的用户
    if (localStorage.getItem("username")) {
      this.username = localStorage.getItem("username");
    }
    // 从Vuex获取功能模块
    if (this.$store.state.sysMenuTree) {
      this.datas = this.$store.state.sysMenuTree;
    }
  },
  mounted() {
    //获取统计信息
    this.$http(this.api.TotalByOrgcode).then(res => {
      if (res.data.result == "true") {
        this.datainfo = res.data.pageData.data[0];
      }
    });
    // 获取这个用户是否有logo
    // console.log(this.$store);
    this.$http(this.api.getCustomIcon, {
      id: this.$store.state.userinfo.id
    }).then(res => {
      if (res.data.result == "true") {
        this.logo = true;
        this.logoUrl = res.data.pageData.data[0].iconUrl;
      }
    });
  }
};
</script>
<style scoped>
[v-cloak] {
  display: none;
}
.user-logo {
  width: 78.5px;
  height: 23px;
  opacity: 0.5;
}
.userinfo {
  margin: 0 30px 0 15px;
}
.doctor-header {
  width: 100%;
  height: 166.5px;
  background: linear-gradient(
    0deg,
    rgba(80, 234, 210, 1) 0%,
    rgba(8, 196, 230, 1) 100%
  );
  position: sticky;
  left: 0;
  top: 0;
}
.doctor-info {
  display: flex;
  padding: 12px;
  align-items: center;
  justify-content: space-around;
}
.doctor-info > div {
  font-size: 11px;
}
.doctor-info > div > span {
  font-size: 9px;
  color: #b0f0ec;
}
.doctor-info > div > p {
  color: #fff;
  font-size: 15px;
  margin-bottom: 4px;
  font-family: Microsoft YaHei;
  font-weight: bold;
}
.headeimg {
  width: 60px;
  height: 60px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}
.more {
  min-height: 400px;
}
.content h2 {
  text-align: center;
  margin-top: 20px;
  color: #666;
}
.Sign-out-btn {
  width: 250px;
  height: 36px;
  background: linear-gradient(
    0deg,
    rgba(60, 223, 216, 1),
    rgba(74, 231, 211, 1)
  );
  border-radius: 18px;
  border: none;
  display: block;
  line-height: 5px;
  font-size: 15px;
  margin-top: 40px;
  margin-left: 62px;
  margin-bottom: 65px;
}
.orders {
  width: 95%;
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin: 0 10px;
  border-top: 1px solid #5de2e1;
}
.orders > div {
  padding-top: 15px;
}
.orders > div > p {
  font-size: 11px;
  color: #b0f0ec;
}
.orders > div > p:last-child {
  margin-top: 2px;
  font-size: 14px;
  color: #fff;
}
.more-info > div {
  width: 161.15px;
  height: 63.55px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 21.5px 0 rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  font-size: 12px;
  margin-left: 19px;
  color: rgba(133, 135, 140, 1);
  margin-top: 19.5px;
  display: flex;
}
.more-info > div:nth-child(2n) {
  margin-left: 15px;
}
.more-info div span {
  font-size: 10px;
  color: #c3c3c5;
  overflow: hidden;
  white-space: nowrap;
  width: 2.266667rem;
  text-overflow: ellipsis;
  display: inline-block;
}
.more-info div p {
  font-weight: bold;
  margin-top: 15px;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  width: 85px;
  text-overflow: ellipsis;
}
.more-info {
  display: flex;
  flex-wrap: wrap;
}
.cir-bgc img {
  width: 39.5px;
  height: 39.5px;
  margin: 12px 10px 12px 12px;
}
</style>